<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--在模板语法里面可以支持表达式 -->
			
			<p>{{ num + 10 }} </p> 
			<p>{{ ok ? 'YES' : 'NO'}} </p>
			<!--
				反转hello
			-->
			<p>{{ msg.split('').reverse().join('') }} </p>
			<!--
				在给属性赋值的时候，不能使用胡子语法 {{}}
				在给属性赋值的时候，只能使用指令
			-->
			<a :href="url">进入百度页面</a>
			<a :href="url1">进入首页</a>
			<img :src="url2"/>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				num:10,
				ok:false,
				msg:'hello',
				url:'http://www.baidu.com',
				url1:"https://www.baidu.com",
				url2:'img/goods001.jpg'
			}
		})
	</script>
</html>
